<template>
  <div class='container'>
      <el-button type="text" @click="open">点击打开 Message Box</el-button>
      <MessageBox :dialogVisible.sync="show" :dialogTitle="dialogTitle" :msgErr="msgErr" :prompt-info="promptInfo" @successCallback="successCallback" @cancelCallback="cancelCallback"></MessageBox>
  </div>
</template>

<script>
import MessageBox from "@/components/public/MessageBox/index.vue"; 
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {
        MessageBox
    },
    // 这里存放数据
    data () {
      return {
           dialogTitle:"弹窗标题提示信息",
           msgErr:"显示报错信息",
           promptInfo:"检测到未保存的内容，是否在离开页面前保存修改",
           show:false
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    mounted () {},
    // 方法集合
    methods: {
        open(){
            this.show=true;
        },
        // 确定时的回调函数
        successCallback(){},
        // 取消时的回调函数
        cancelCallback(){},
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate () {},
    // 生命周期 - 数据挂载之前 
    beforeMount () {},
    // 生命周期 - 数据更新之前 
    beforeUpdate() {},
    // 生命周期 - 数据更新之后 
    updated () {},
    // 生命周期 - 页面销毁之前 
    beforeDestroy() {},
    // 生命周期 - 页面销毁完成 
    destroyed () {},
  }
</script>

<style scoped>
  /* @import url(); 引入公共css类 */

</style>